<template>
	<section class="LayoutLeft">
		<el-menu v-if="ui === 'element'" :unique-opened="true" @select="select" :text-color="J_color.$text" :active-text-color="J_color.$theme">
			<template v-for="item in menuArr">
				<el-submenu :index="item.menuId + '_'" :key="item.menuId">
					<template v-slot:title>
						<i class="el-icon-s-unfold" />
						<span>{{ lan(item.name) }}</span>
					</template>

					<template v-for="item_ in item.children">
						<el-menu-item-group style="color: #999999;" :key="item_.menuId">
							<el-menu-item :index="item_.url">
								<i class="el-icon-minus" />
								<span>{{ lan(item_.name) }}</span>
							</el-menu-item>
						</el-menu-item-group>
					</template>
				</el-submenu>
			</template>
		</el-menu>

		<Menu v-else-if="ui === 'iview'" @on-select="select" width="auto">
			<template v-for="item in menuArr">
				<Submenu :name="item.menuId + '_'" :key="item.menuId">
					<template v-slot:title>
						<Icon type="md-menu" />
						<span>{{ lan(item.name) }}</span>
					</template>

					<template v-for="item_ in item.children">
						<MenuGroup style="color: #999999;" :key="item_.menuId">
							<MenuItem :name="item_.url">
								<Icon type="md-remove" />
								<span>{{ lan(item_.name) }}</span>
							</MenuItem>
						</MenuGroup>
					</template>
				</Submenu>
			</template>
		</Menu>
	</section>
</template>

<script>
export default {
	name: 'LayoutLeft',
	props: {
		menuArr: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			J_color: this.$mapping.J_color
		};
	},
	methods: {
		select(e) {
			this.$emit('toLink', e);
		},
		lan(name) {
			return this.$mapping.J_i18n(name, name, 'demo.mock');
		}
	}
};
</script>

<style lang="scss">
.LayoutLeft {
	z-index: 5;
	background-color: white;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

	.el-menu {
		.el-icon-s-unfold + span {
			padding-right: 1rem;
		}
		.el-menu-item-group__title:empty {
			display: none;
		}
	}

	.ivu-menu {
		.ivu-icon.ivu-menu-submenu-title-icon {
			right: 0;
		}
		.ivu-menu-item-group-title:empty {
			display: none;
		}
		.ivu-menu-submenu-title,
		.ivu-menu-item {
			width: max-content;
		}
	}
}
</style>
